<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
    ！注意写上题目题数
    例如 ：
    1、选择题
        (1) A
        (2) A
        (3) true false false
        (4) A
        (5) A 
        
    2、填空题
       第一题
        (1) 获取节点方法：
            (1)getElementById('id名')
            (2)getElementByClassName('.class名')
            (3)getElementByTagName('元素名')
            (4)getElementByName('name名')
            (5)querySletor('')返回第一个class名
            (6)querySletorAll('')返回一个相同class名的集合
            (7)子节点node.childNodes、node.childen、node.firstChild、node.lastChild、node.firstElementChild
            (8)父节点child.parnetNode、child.parnetElement
            (9)同级节点node.previousElementSibiling、node.previousSibiling、node.nextElementSibiling、node.nextSibiling

        (2)创建节点方法
            (1)document.createTextNode('文本节点')
            (2)document.createElement('元素节点')
            
        (3)添加节点方法
            (1)node.appendChild(element)
            (2)node.append(element)
           
        (4)dom的其他操作方法
            (1)删除自身节点node.remove()
            (2)删除子节点node.removeChild(子节点)
            (3)替换node.replaceChild(newNode,oldNode)
            (4)插入node.inserBefore(newElement,element)
            (5)修改innerHTML 标签内的内容替换
            (6)修改outerHTML 整个标签都替换
            (7)修改innerText 标签内的内容替换，内容是字符串
            (8)修改outerHTML 整个元素都替换，都变成字符串
        
        第二题
        (1) Object.prototype
        (2) Function.prototype
            Object.prototype
        (3) Array.prototype
            Object.prototype
        (4) Function.prototype
            Array.constructor.prototype
            Object.constructor.prototype
        (5) true.constructor.prototype
        (6) Function.__proto__.__proto__

    3. 描述题
        第 1 题
        什么是ajax?
        就是异步的JS 和 XML.通过AJAX可以在浏览器中向服务器，发送执行异步网络请求，是一种创建动态网页技术请求。

        第2题
        this打印出指向的是Fn(),fn()的原型prototype有constructor、__proto__

        第3题
        简要说下什么是event loop?
        event loop就是事件循环。
        1. 事件开始,进入主线程。所有的同步代码都会在主执行栈上调用，形成了一个执行栈（先进后出），如果发现异步任务，将异步任务出栈，交给异步模块，主线程继续执行后面的同步事件。
        2. 除了执行栈，还有一个任务队列。只要异步操作执行完成，就会到任务队列排队（先进先出）。
        3. 一旦执行栈的所有同步代码执行完毕后，系统就会读取任务队列里面的异步任务，被读取的异步任务结束了等待状态，再次进入执行栈。
        4. 主线程不断重复上面1~3步骤（Event Loop）。

        第4题
        原型：每个函数都有——prototype属性（原型对象）,这个属性是一个指针，通过constructor指向的是一个对象，这个对象包含了，通过构造函数所创建的实例对象"共享的属性和方法"

        原型链：通过实例对象（拥有的Proto属性）与原型（prototype属性）之间的连接


    4.逻辑题
    第一题 Goodbye Jack
    第二题 20
    第三题 21
    第四题 alert(666)
    第五题 Hy Jack
    第六题 Jack 
    第七题 1  报错没有这个函数  2
    -->

    <!-- 5.实操题 -->
    <!-- 第一题 -->
    <!-- <script>
        //ES5使用构造函数定义Person类
        function Person1() {};
        let a = new Person1();
        console.log(a);

        //ES6使用class定义Person类
        class Person2 {
            constructor() {}
        };
        let b = new Person2();
        console.log(b);
    </script> -->

    <!-- 第二题 -->
    <!-- <script>
        // 使用Promise封装ajax
        function ajax(_url, _data, _method) {
            // GET请求为默认请求
            let method = _method || "GET";
            // GET请求就直接默认是null
            let data = _data || null;
            // 返回Prmoise对象
            return new Promise((resolve, reject) => {
                // 实例化一个XMLHttpRequest对象
                let xhr = new XMLHttpRequest();

                if (method.toUpperCase() == "GET") {
                    let str = "?";
                    // 处理get请求的参数
                    for (let k in data) {
                        str += `${k}=${data[k]}&`;
                    };
                    str = str.slice(0, -1);
                    xhr.open(method, _url + str);
                } else {
                    xhr.open(method, _url);
                }
                // 设置默认请求头
                // 设置请求头格式为json格式
                xhr.setRequestHeader("Content-Type", "application/json");
                xhr.send(JSON.stringify(data));

                xhr.addEventListener("readystatechange", () => {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            // 返回解析成功结果
                            resolve(JSON.parse(xhr.responseText));
                        } else {
                            // 拒绝
                            reject(JSON.parse(xhr.responseText));
                        }
                    }
                })
            })
        };


        // GET请求
        ajax("http://studentback.dfbuff.xyz/getMethod?type=图片").then(res => {
                console.log(res);
                return ajax("http://studentback.dfbuff.xyz/getMethod?type=冷笑话");
            })
            .then(res => {
                console.log(res);
            })
            .catch(err => {
                console.log(err);
            });
    </script> -->

    <!-- 第三题 -->
    <script>
        let arr = [1, 2, 5, 2, 4, 5, 10, 2, 5, 1, 2, 4, 5, 8, 6, 4];

        //方法一
        console.log(...new Set(arr));

        //方法二
        let newArr2 = [];
        for (var i = 0; i < arr.length; i++) {
            if (newArr2.indexOf(arr[i]) === -1) {
                newArr2.push(arr[i])
            }
        }
        console.log(newArr2);

        //方法三
        var newArr3 = [];
        for (var i = 0; i < arr.length; i++) {
            if (!newArr3.includes(arr[i])) { //includes 检测数组是否有某个值
                newArr3.push(arr[i]);
            }
        }
        console.log(newArr3);

        //方法四
        arr = arr.sort()
        var newArr4 = [arr[0]];
        for (var i = 1; i < arr.length; i++) {
            if (arr[i] !== arr[i - 1]) {
                newArr4.push(arr[i]);
            }
        }
        console.log(newArr4);
    </script>






    <!-- 4.逻辑题验证 -->
    <!-- <script>
        var object = {}
        console.log(object.__proto__);
        console.log(Object.prototype);

        var fn = function() {};
        console.log(fn.__proto__);
        console.log(Function.prototype);
        console.log(fn.__proto__.__proto__);
        console.log(Function.prototype.__proto__);
        console.log(Object.prototype);

        var array = [];
        console.log(array.__proto__);
        console.log(Array.prototype === array.__proto__);
        console.log(array.__proto__.__proto__);
        console.log(Array.prototype.__proto__);
        console.log(Object.prototype);

        console.log(Function.prototype.__proto__);
        console.log(Function.__proto__.__proto__);
    </script> -->

    <!-- <script>
        function Fn() {
            console.log(this)
        }
        new Fn()
    </script> -->

    <!-- <script>
        //1
        var name = 'World!';
        (function() {
            if (typeof name === 'undefined') {
                var name = 'Jack';
                console.log('Goodbye ' + name);
            } else {
                console.log('Hello ' + name);
            }
        })(); 

        //2
        var a = 10;

        function fn() {
            console.log(a);
        }

        function bar(f) {
            var a = 20;
            f();
        }
        bar(fn); //20
    </script> -->

    <!-- <script>
        //3.
        function sidEffecting(ary) {
            ary[0] = ary[2];
        }

        function bar(a, b, c) {
            c = 10
            sidEffecting(arguments); //a b c
            return a + b + c;
        }
        console.log(bar(1, 1, 1));


        //4
        function say666() {
            var num = 666;
            var sayAlert = function() {
                alert(num);
            }
            num++;
            return sayAlert;

        }
        var sayAlert = say666(); //function() { alert(num); }
        sayAlert() //666
    </script> -->

    <!-- <script>
      
        function logName() {
            console.log(this.name);//3.指向window
        }


        function doFun1(fn) {
            fn(); //2.logName()

        }

        function doFun2(o) {
            o.logName();
            //{
            //     name: "Jack",
            //     logName: logName
            // }.logName(this.name)
        }

        var obj = {
            name: "Jack",
            logName: logName
        };

        var name = "Hy";

        doFun1(obj.logName); //1.obj.logName就是logName
        doFun2(obj);
    </script> -->

    <!-- <script>
        function fun(somthing) {
            console.log(this.name, somthing);
        }

        var obj = {
            name: "Jack"
        };

        function bindFun(fn, obj) {
            return function() {
                return fn.apply(obj, arguments);
            }
        }

        var bar = bindFun(fun, obj);

        var b = bar("HanMeiMei");

        console.log(b);
    </script> -->

    <!-- <script>
        // GO = {
        //     test = function test() {
        //         console.log(1);
        //     }
        // }
        test(); //1

        var test = 0;

        function test() {
            console.log(1);
        } //已经被提升了，就没用了

        test();

        test = function() {
            console.log(2);
        };

        test(); //2
    </script> -->


</body>

</html>